<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Babylon.js GizmoManager Demo</title>
    <!-- 引入Babylon.js库 -->
    <script src="babylon.js"></script>
    <script src="babylon.gui.min.js"></script>
    <script src="babylonjs.loaders.min.js"></script>
    <style>
		body { margin: 0; overflow: hidden; }
		canvas { width: 100%; height: 100%; }
		#controls {
			position: absolute;
			top: 10px;
			left: 10px;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			padding: 10px;
			border-radius: 5px;
			z-index: 100;
		}
		/* FDS面板样式 */
		#fds-panel {
			position: absolute;
			top: 10px;
			right: 10px;
			background-color: rgba(0, 0, 0, 0.7);
			color: white;
			padding: 10px;
			border-radius: 5px;
			font-family: monospace;
			font-size: 12px;
			line-height: 1.5;
			z-index: 100;
			max-width: 300px;
		}
		#fds-panel h3 {
			margin: 0 0 5px 0;
			border-bottom: 1px solid #444;
			padding-bottom: 5px;
		}
		#fds-panel .fds-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			margin-bottom: 2px;
			gap: 10px; /* 添加间距使内容更清晰 */
		}
		#fds-panel .fds-label {
			color: #aaa;
			text-align: right; /* 标签右对齐 */
			white-space: nowrap; /* 防止标签换行 */
		}
		#fds-panel .fds-value {
			color: #0f0;
			text-align: left; /* 值左对齐 */
			font-weight: bold; /* 使值更突出 */
		}
		#fds-panel .fds-value.warn {
			color: #ff0;
		}
		#fds-panel .fds-value.error {
			color: #f00;
		}
	</style>

</head>
<body>
    <!-- 渲染Canvas -->
    <canvas id="renderCanvas"></canvas>
    
    <!-- 简单的控制面板 -->
    <div id="controls">
        <p>点击并拖动变换工具来操作球体</p>
        <p>键盘快捷键:</p>
        <ul>
            <li>W: 平移工具</li>
            <li>E: 旋转工具</li>
            <li>R: 缩放工具</li>
            <li>T: 边界框工具</li>
        </ul>
    </div>
    
    <!-- FDS监控面板 -->
    <div id="fds-panel">
        <h3>性能监控</h3>
        <div class="fds-row"><span class="fds-label">FPS:</span> <span class="fds-value" id="fds-fps">0</span></div>
        <div class="fds-row"><span class="fds-label">Draw Calls:</span> <span class="fds-value" id="fds-draw-calls">0</span></div>
        <div class="fds-row"><span class="fds-label">Triangles:</span> <span class="fds-value" id="fds-triangles">0</span></div>
        <div class="fds-row"><span class="fds-label">Memory:</span> <span class="fds-value" id="fds-memory">0 MB</span></div>
        <div class="fds-row"><span class="fds-label">Render Time:</span> <span class="fds-value" id="fds-render-time">0 ms</span></div>
    </div>

    <script>
        // 创建场景和相机
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        const scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);

        // 创建一个球体网格对象
        const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
        sphere.position.y = 1;
        
        // 为球体添加材质以便更容易识别
        const material = new BABYLON.StandardMaterial("sphereMaterial", scene);
        material.diffuseColor = new BABYLON.Color3(0.2, 0.6, 0.8); // 蓝色调
        sphere.material = material;
		
        // 创建第二个球体网格对象
        const sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere2", { diameter: 1 }, scene);
        sphere2.position.y = 3;
        sphere2.position.x = 2; // 稍微偏移位置以便区分
        sphere2.material = material;

        // 创建光源
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

        // 创建并配置GizmoManager
        const gizmoManager = new BABYLON.GizmoManager(scene);
        gizmoManager.positionGizmoEnabled = true;  // 启用平移控件
        gizmoManager.rotationGizmoEnabled = true;  // 启用旋转控件
        gizmoManager.scalingGizmoEnabled = true;   // 启用缩放控件
        gizmoManager.boundingBoxGizmoEnabled = true;    
        
        // 设置键盘快捷键切换变换工具
        window.addEventListener("keydown", function (evt) {
            switch (evt.key) {
                case "w":
                    gizmoManager.positionGizmoEnabled = true;
                    gizmoManager.rotationGizmoEnabled = false;
                    gizmoManager.scaleGizmoEnabled = false;
                    gizmoManager.boundingBoxGizmoEnabled = false;
                    break;
                case "e":
                    gizmoManager.positionGizmoEnabled = false;
                    gizmoManager.rotationGizmoEnabled = true;
                    gizmoManager.scaleGizmoEnabled = false;
                    gizmoManager.boundingBoxGizmoEnabled = false;
                    break;
                case "r":
                    gizmoManager.positionGizmoEnabled = false;
                    gizmoManager.rotationGizmoEnabled = false;
                    gizmoManager.scaleGizmoEnabled = true;
                    gizmoManager.boundingBoxGizmoEnabled = false;
                    break;
                case "t":
                    gizmoManager.positionGizmoEnabled = false;
                    gizmoManager.rotationGizmoEnabled = false;
                    gizmoManager.scaleGizmoEnabled = false;
                    gizmoManager.boundingBoxGizmoEnabled = true;
                    break;
            }
        });

        // FDS监控面板功能
        let lastFrameTime = 0;
        let frameCount = 0;
        let fps = 0;
        const fpsUpdateInterval = 1000; // 每1秒更新一次FPS
        let lastFpsUpdate = performance.now();
        
        // 获取FDS面板DOM元素
        const fdsFps = document.getElementById('fds-fps');
        const fdsDrawCalls = document.getElementById('fds-draw-calls');
        const fdsTriangles = document.getElementById('fds-triangles');
        const fdsMemory = document.getElementById('fds-memory');
        const fdsRenderTime = document.getElementById('fds-render-time');
		const sceneInstru = new BABYLON.SceneInstrumentation(scene);
        
        // 渲染循环
        engine.runRenderLoop(() => {
            const now = performance.now();
            
            // 计算FPS
            frameCount++;
            if (now - lastFpsUpdate >= fpsUpdateInterval) {
                fps = Math.round((frameCount * 1000) / (now - lastFpsUpdate));
                frameCount = 0;
                lastFpsUpdate = now;
                
                // 更新FPS显示
                fdsFps.textContent = fps;
                fdsFps.className = "fds-value" + (fps < 30 ? " error" : fps < 60 ? " warn" : "");
            }
            
            // 渲染场景
            scene.render();
            
            // 更新性能指标
            fdsDrawCalls.textContent = sceneInstru.drawCallsCounter.current;
            fdsTriangles.textContent = scene.getActiveIndices()/3;
            
            // 估算内存使用（这只是一个近似值）
            if (window.performance && window.performance.memory) {
                const memory = window.performance.memory.usedJSHeapSize / (1024 * 1024);
                fdsMemory.textContent = memory.toFixed(2) + " MB";
            }
            
            // 计算渲染时间
            const renderTime = performance.now() - now;
            fdsRenderTime.textContent = renderTime.toFixed(2) + " ms";
            fdsRenderTime.className = "fds-value" + (renderTime > 16 ? " warn" : "");
        });
        
        // 处理窗口大小变化
        window.addEventListener("resize", () => {
            engine.resize();
        });
    </script>
</body>
</html>
